<template>
    <div class='details'>
        <div class='firstDetails' v-if='first'>
            <el-form :label-position="labelPosition" label-width="100px">
                <el-form-item label="发行商">
                    <p v-if='issueStatus'>{{issueText}}</p>
                    <el-select v-if='!issueStatus' v-model="formLabelAlign.targetUserId" placeholder="请选择发行商">
                        <el-option
                        v-for="item in issueList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="项目名称">
                    <el-input v-model="formLabelAlign.title" maxlength="24" placeholder='请输入项目名称'></el-input>
                </el-form-item>
                <el-form-item label="影视类型">
                    <el-select v-model="formLabelAlign.type" placeholder="请选择影视类型">
                        <el-option
                        v-for="item in movieType"
                        :key="item.value"
                        :label="item.text"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="融资进度">
                    <el-select v-model="formLabelAlign.status" placeholder="请选择融资状态">
                        <el-option
                        v-for="item in status"
                        :key="item.value"
                        :label="item.text"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="上映状态">
                    <el-select v-model="formLabelAlign.releaseStatus" placeholder="请选择上映状态">
                        <el-option
                        v-for="item in release"
                        :key="item.value"
                        :label="item.text"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="融资金额">
                    <div class='moneyItem'>
                        <el-input
                            @change='changeNumber()'
                            v-model="formLabelAlign.totalOfMoney" 
                            placeholder="请输入融资金额，需最低10W且需为1W的倍数"></el-input>
                        <span>元</span>
                    </div>
                </el-form-item>
                <el-form-item label="单份价格">
                    <div class='moneyItem'>
                        <el-input
                            @change='changeNumber()'
                            v-model="formLabelAlign.priceOfUnit" 
                            placeholder="请输入单份价格，需100的倍数"></el-input>
                        <span>元/份</span>
                    </div>
                </el-form-item>
                <el-form-item label="项目份数">
                    <div class='moneyItem'>
                        <el-input 
                            :disabled="true"
                            v-model="numberItems" 
                            placeholder="项目份数"></el-input> 
                        <span>份</span>
                    </div>
                </el-form-item>
                <el-form-item label="限购数量">
                    <el-input v-model="formLabelAlign.userLimit" placeholder="请输入限购数量，0代表不限购"></el-input>
                </el-form-item>
                <el-form-item label="线下订金">
                    <el-input v-model="formLabelAlign.deposit" placeholder="请输入线下定金，0代表不支持线下支付"></el-input>
                </el-form-item>
                <el-form-item label="简介">
                    <el-input 
                        :autosize="{ minRows: 2, maxRows: 4}"
                        v-model="formLabelAlign.subtitle"  
                        placeholder="请输入简介，20字以内"
                        maxlength="20"
                        type='textarea'>
                    </el-input>
                </el-form-item>
                <el-form-item label="收益说明">
                    <el-input 
                        :autosize="{ minRows: 2, maxRows: 4}"
                        type='textarea'
                        maxlength="20"
                        placeholder="请输入收益说明，20字以内"
                        v-model="formLabelAlign.incomeDetail">
                    </el-input>
                </el-form-item>
                <el-form-item label="风险提示">
                    <el-input 
                        :autosize="{ minRows: 2, maxRows: 4}"
                        type='textarea'
                        maxlength="500"
                        placeholder="请输入风险提示，500字以内"
                        v-model="formLabelAlign.riskWarning"
                    ></el-input>
                </el-form-item>
                <el-form-item label="是否下线">
                    <el-radio-group v-model="formLabelAlign.disable">
                        <el-radio :label="true">是</el-radio>
                        <el-radio :label="false">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="排序值">
                    <el-input v-model="formLabelAlign.queue" placeholder="请输入排序值"></el-input>
                </el-form-item>
                <el-form-item class='cover' label="项目封面">
                    <el-upload
                        class="upload-demo"
                        :action='uploadAction'
                        :show-file-list="false"
                        name='userfile'
                        :on-success="handleAvatarSuccess">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">上传项目封面，340x458宽高大小</div>
                    </el-upload>
                    <div v-if="coverImageSatus" class='imgBox'>
                        <img :src="formLabelAlign.coverImage" alt="">
                    </div>
                </el-form-item>
                <el-form-item class='rotation' label="轮播图">
                    <el-upload
                        class="upload-demo"
                        :action='uploadAction'
                        name='userfile'
                        :show-file-list="false"
                        :on-success="handleRotationSuccess">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">上传项目轮播图，360x670宽高大小，5张以内</div>
                    </el-upload>
                    <div v-if='carouselStatus' class='rotationList'>
                        <div v-for='(item,index) in formLabelAlign.carousels' :key='index' class='imgList'>
                            <div>
                                <img :src="item" alt="">
                            </div>
                            <p @click='delRotation(item,index)'>删除</p>
                        </div>
                    </div>
                </el-form-item>
            </el-form>
             <el-button @click='next()' type="primary">下一步</el-button>
        </div>
        <div v-if='second'>
            <h3 class='textStyle'>项目详情</h3>
            <Tinymce :height='400' ref="editor" v-model="formLabelAlign.content"/>

            <div class='btn'>
                <el-button @click='nextStep' type="primary">下一步</el-button>
                <el-button @click='reviousrevious' type="text">上一步</el-button>
            </div>
        </div>
        <threeTinymce ref="threeTinymce" @threeStatus='threeStatus' @sampleContractData='sampleContractData'></threeTinymce>
        <div v-if='four'>
            <div class='success'>
                <i class='iconfont icon-chenggong'></i>
                <p>提交成功，请等待系统审核！</p>
                <p>审核热线：40032014582</p>
            </div>
        </div>
    </div>
</template>


<script>
import {ajax} from '@/api'
import Tinymce from '@/components/Tinymce'
import {getToken} from "@/utils/auth";
import numberFormat from '@/api/numberFormat';
import threeTinymce from './threeTinymce';
export default {
    name:'addProjectIndex',
    data(){
        return {
            sampleContract:'',
            issueStatus:false,
            issueText:'',
            coverImageSatus:false,
            carouselStatus:false,
            numberItems:'',
            uploadAction: process.env.BASE_API + "file.upload",
            first:true,
            second:false,
            three:false,
            four:false,
            disabled:false,
            issueList:'',    //发行商列表
            movieType:vars.movieType,//影视类型
            status:[{      //融资状态
                text: "预热中",
                value: "preheating"
            },{
                text: "进行中",
                value: "ing"
            }],
            release:vars.movieReleaseStatus,//上映状态
            releaseStatus:[{   //发布状态
                value:'是',
                text:'是'
            },{
                value:'否',
                text:'否'
            }],
            labelPosition:'left',
            formLabelAlign:{
                movieId:'',
                targetUserId:'',
                type:'',
                status:'',
                releaseStatus:'',
                title:'',
                subtitle:'',
                totalOfMoney:'',
                priceOfUnit:'',
                userLimit:'',
                coverImage:'',
                carousels:[],
                content:'',
                contractDetail:'',
                incomeDetail:'',
                riskWarning:'',
                disable:false,
                queue:'',
                token:getToken()
            },
            activityForm:{
                content:''
            },
            listParams:{
                role:'issue',
                auth:0,
                keyword:'',
                start:0,
                limit:100,
                token:getToken()
            },
        }
    },
    methods:{
        //添加项目的判断
        vails(){
            if(this.formLabelAlign.targetUserId === ''){
                return this.$message.error('请选择发行商');
            }
            if(this.formLabelAlign.title === ''){
                 return this.$message.error('请输入项目名称');
            }
            if(this.formLabelAlign.type === ''){
                return this.$message.error('请选择影视类型');
            }
            if(this.formLabelAlign.status === ''){
                return this.$message.error('请选择融资进度');
            }
            if(this.formLabelAlign.releaseStatus === ''){
                return this.$message.error('请选择影片上映状态');
            }
            
            //当融资状态不是预热中时
            if(this.formLabelAlign.totalOfMoney === ''){
                return this.$message.error('请输入融资金额');
            }
            
            if(this.formLabelAlign.priceOfUnit === ''){
                return this.$message.error('请输入单份价格');
            }
            

            if(this.formLabelAlign.userLimit === ''){
                return this.$message.error('请输入限购数量');
            }
            if(parseFloat(this.formLabelAlign.userLimit) > this.numberItems){
                return this.$message.error('限购数量应小于项目份数');
            }
            
            if(this.formLabelAlign.deposit === ''){
                this.formLabelAlign.deposit = 0;
            }else{
                if(numberFormat.toInteger(this.formLabelAlign.deposit) > numberFormat.toInteger(this.formLabelAlign.priceOfUnit)){
                    return this.$message.error('输入订金需小于项目单价');
                }
            }

            if(this.formLabelAlign.subtitle === ''){
                return this.$message.error('请输入简介');
            }
            if(this.formLabelAlign.incomeDetail === ''){
                return this.$message.error('请输入收益说明');
            }
            if(this.formLabelAlign.riskWarning === ''){
                return this.$message.error('请输入风险提示');
            }

            if(this.formLabelAlign.queue === ''){
                return this.$message.error('请输入排序值');
            }

            if(this.formLabelAlign.coverImage === ''){
                return this.$message.error('请上传项目封面');
            }
            if(this.formLabelAlign.carousels.length === 0){
                return this.$message.error('请上传项目轮播图');
            }

        },

        //验证是否为数字和正整数
        isNumber(number){
            let re = /^[0-9]+.?[0-9]*$/;
            let integer = /^[1-9]+[0-9]*]*$/;
            let num = number;
        　　if (!re.test(num)) {
        　　　　return this.$message.error("请输入数字");
        　　}

            if (!integer.test(num)) {
        　　　　return this.$message.error("请输入正整数");
        　　}else{
               return true;
            }
        },
        changeNumber(){
            console.log(this.formLabelAlign.totalOfMoney,this.formLabelAlign.priceOfUnit);
            //自动计算出项目份数
            if(Number(this.formLabelAlign.totalOfMoney) !== '' && Number(this.formLabelAlign.priceOfUnit) !== ''){
                if(Number(this.formLabelAlign.totalOfMoney) && Number(this.formLabelAlign.priceOfUnit)){
                  if(isNaN(parseInt(Number(this.formLabelAlign.totalOfMoney) / Number(this.formLabelAlign.priceOfUnit)))){
                      this.numberItems = 0;
                  }else{
                      this.numberItems = parseInt(Number(this.formLabelAlign.totalOfMoney) / Number(this.formLabelAlign.priceOfUnit));
                  }  
                }
            }

        },
        //调到第二步
        next(){
            if(this.vails() === undefined){
                    
                this.first = false;
                this.second = true;
            }   
        },
        reviousrevious(){
            this.first = true;
            this.second = false;
        },
        reviousreviousSecond(){
            this.second = true;
            this.three = false;
            console.log(this.sampleContract);
        },
        //封面图
        handleAvatarSuccess(res,file) {
            if(res.status){
                this.coverImageSatus = true;
                this.formLabelAlign.coverImage = res.data;
            }
        },
        //发行商列表
        getList(){
            ajax('users',this.listParams).then((res) => {
                if(res.status === 200){
                    this.issueList = res.data.data;
                }else{
                    this.$message.error(json.message);
                }
            });
        },
        nextStep(){
            if(this.formLabelAlign.content === ''){
                this.$message.error('项目详情不能为空');
                return false;
            }
            this.second = false;
            this.$refs.threeTinymce.openThreeStatus();
            // this.three = true;
        },
        threeStatus(){
            this.second = true;
        },
        //得到样板合同 == 提交添加项目
        sampleContractData(data){
            //data 数据是样板合同
            this.formLabelAlign.contractDetail = data;
            if(this.isNumber(Number(this.formLabelAlign.totalOfMoney))){
                if(this.formLabelAlign.totalOfMoney < 100000){
                    return this.$message.error('融资金额需大于100000');
                }
                if(this.formLabelAlign.totalOfMoney % 10000 !== 0){
                    return this.$message.error('融资金额需10000的倍数');
                }else{
                    this.formLabelAlign.totalOfMoney = numberFormat.toInteger(this.formLabelAlign.totalOfMoney);
                }
            }
            // if(this.isNumber(Number(this.formLabelAlign.priceOfUnit))){
            //     if(this.formLabelAlign.priceOfUnit % 100 !== 0){
            //         return this.$message.error('单份价格需100的倍数');
            //     }else{
            //         this.formLabelAlign.priceOfUnit = numberFormat.toInteger(this.formLabelAlign.priceOfUnit);
            //     }
            // }
            
            if(this.formLabelAlign.content === ''){
                 return this.$message.error('请输入项目内容');
            }
            this.formLabelAlign.priceOfUnit = numberFormat.toInteger(this.formLabelAlign.priceOfUnit);
            this.formLabelAlign.deposit = numberFormat.toInteger(this.formLabelAlign.deposit);

            this.formLabelAlign.carousels = JSON.stringify(this.formLabelAlign.carousels);
            ajax('movieEditForManager',this.formLabelAlign).then((res) => {
                console.log(res);
                if(res.data.status){
                    this.four = true;
                    this.first = false;
                    this.second = false;
                    this.$refs.threeTinymce.closeThree();
                    // setTimeout(() => {
                    //     this.$route.go(-1);
                    // },100);
                }else{
                    this.$message.error(res.data.message);
                    this.formLabelAlign.carousels = JSON.parse(this.formLabelAlign.carousels);
                }
            });
        },
        //轮播图
        handleRotationSuccess(res) {
            if(res.status){
                this.carouselStatus = true;
                if(this.formLabelAlign.carousels.length < 5){
                    this.formLabelAlign.carousels.push(res.data);
                }else{
                    this.$message.error('最多上传5张');
                }
                
            }
        },
        delRotation(item,index){
            this.formLabelAlign.carousels.splice(index,1);
            // this.carouselStatus = false;
        },

    },
    mounted(){
            let roles = JSON.parse(localStorage.roles);
            if(roles.indexOf('issue') > -1){
                this.issueStatus = true;
                this.issueText = localStorage.userName;
                this.formLabelAlign.targetUserId = localStorage.userId;
            }else{
                this.getList();
            }
            
        
    },
    components:{
        Tinymce,
        threeTinymce
    }
}
</script>


<style lang="less" scoped>
.details{
    padding: 2rem;
    .firstDetails{
        width: 54%;
        p{
            margin: 0;
        }
    }
    .rotation{
        div{
            width: 338px;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .rotationList{
            display: flex;
            flex-wrap: wrap;
            width: inherit;
            .imgList{
                margin: 0 .5rem .5rem 0;
                div{
                    width: 321px;
                    height: 182px;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                p{
                    text-align: center;
                    color: red;
                    font-size: 14px;
                    cursor: pointer;
                }
            }
        }


    }
    .btn{
        margin: 2rem 0 0 0;
    }

    .textStyle{
        margin: 0 0 0.7rem 0;
        font-weight: 400;
        font-size: .8rem;
    }

    .success{
        width: 15rem;
        text-align: center;
        margin: 0 auto;
        .iconfont{
            font-size: 7rem;
            color: #1e98ea;
        }
    }
    .cover{
        .imgBox{
            width: 90px;
            height: 133px;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }

    .moneyItem{
        display: flex;
        .el-input{
            width: 92%;
        }
        span{
            margin-left: 1rem;
        }
    }

  

}
</style>
